<div class="container grid">
  <div class="sidebar">Sidebar</div>
  <div class="main">Main</div>
</div>

<style>
.container.grid {
  display: grid;
  grid-template-columns: 1fr 2fr; 
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
  gap: 20px;   position   :relative ; 
  grid-gap: 20px ;
    /**需要考虑上下文就用 relative相对于同级元素, 否则用absolute相对于父元素或者 fixed相对于根元素  */
}

.sidebar, .main {
  padding: 20px;
  background-color: #f0f0f0;
}

.main {
  background-color: #524e4e;
}
</style>
<div class="container flex">
  <div class="sidebar-flex">Sidebar</div>
  <div class="main-flex">Main</div>
</div>

<style>
.container.flex {
    margin-top : 20px ;  padding: 20px ;
  display: flex;  position:  relative  ;  
  
  justify-content:  center;
  align-items: center; 
   
}

.sidebar-flex {
  flex: 1;
  padding: 20px;
  background-color: #393434;
  margin-right: 10px;
}

.main-flex {
  flex: 2;
  padding: 20px;
  background-color: #341919;
}
.main-flex:after { 
    content:  "click me " ; 
    position : absolute  ; 
    top : 50% ; 
    left : 50% ;  
    margin-top: 30px ; ;
    padding: 10px 20px ;  
    display: flex ; 
    align-items: center ; 
    justify-content: center ; 
    font-size: 1.2em ; 
    align-content: center;
    background-color: aqua;
    
}
</style>


<div class="box">
    <div  class="item">1</div>
    <div  class="item">2</div>
    <div  class="item">3</div>
    <div  class="item">4</div>
    <div  class="item5">5<span>fuck <i>you</i></span></div>
</div>


<style>
.box{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    align-content: stretch;
    gap: 5px
}
.box  .item { 
        width: 150px;
    height: 205px;
    order: 0;
     alignSelf: auto;
    flexBasis: auto;
    flexGrow: 0;
    flexShrink: 1
}


.box  {
    .item5 { 
      span{
            i{ 
            background-color: #341919;
            }
        }
    }
}

</style>